<template>
	<view>
 <view class="my-search-container">
	      <!-- 使用 view 组件模拟 input 输入框的样式 -->
	      <view class="my-search-box">
	      
	  		  <input type="text" v-model="keyword"  placeholder="请输入司机手机号"/>
	  		   <button type="primary" v-model="keyword" class="btn" @click="searchData()">搜索</button>
	      </view>
		  
	    </view>
		
		<view>
			<view v-for="(orderList,index) in searchList" :key="orderList.suId">
			<navigator url="../ddxiangqing/ddxiangqing" @click="snedSuId(orderList.suId)">
				  
			<uni-card :title=orderList.suId extra="未完成"  > 	
			  <text class="uni-body">
			  支付单号：{{orderList.payOrder}}
			  司机名字：{{orderList.sjName}}  
			  司机手机号：{{orderList.sjPhone}}
			  下单时间： {{orderList.createTime}}
			  </text>
			</uni-card>
			</navigator>
			
			</view>
		</view>
	</view>	
		
</template>

<script>
	import axios from 'axios';
	import config from '../../common/config';
  export default {
    data() {
      return {
		  keyword:'',
        searchList:[]
        
      };
    },
	created() {
		this.getSearchList(),
		console.log(this.keyword)
	},
	methods:{
		getSearchList(){
			axios.get(config.baseUrl+'supplier/ssmsuorder/findOrder/'+this.keyword)
			.then((response)=>{
				this.searchList=response.data.orderVoArrayList
				if(response.data.code==404){
					uni.showToast({
						title:response.data.msg
					})
				}
			})
		},
		searchData(){
			
			if(this.keyword.length==0){
				uni.showToast({
					title:'内容不能为空'
				})
			}else{
				this.getSearchList()
			}
		}
	}
  }
</script>

<style lang="scss">
.my-search-container {
  background-color:#1296db;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}
.btn{
	margin-left: 232rpx;
	height: 80rpx;
}
</style>
